<template>
	<div class="">
		
		<el-form label-width="80px" :model="search" :inline="true">
			<el-form-item label="账号">
			  <el-input v-model="search.CustomerId"></el-input>
			</el-form-item>
			<el-form-item label="真实姓名">
			  <el-input v-model="search.name"></el-input>
			</el-form-item>
			<el-form-item label="所属门店">
			  <el-input v-model="search.address"></el-input>
			</el-form-item>
			<el-form-item label="角色">
			  <el-input v-model="search.role"></el-input>
			</el-form-item>
			<el-form-item label="状态">
			  <el-input v-model="search.status"></el-input>
			</el-form-item>
			<el-button  type="primary" >搜索</el-button>
			<el-button  type="primary" @click="clearBtn">重置</el-button>
		</el-form>
		
		<el-button type="primary" icon="el-icon-plus" @click="dialogTitle='新增用户';dialogVisible=true">新增</el-button>
		<el-button type="primary" icon="el-icon-edit-outline">编辑</el-button>
		 <el-button type="danger" icon="el-icon-delete" @click="batchDelete(tableChecked)">批量删除</el-button><br>
		<el-table
				    ref="multipleTable"
				    :data="ftableData"
				    tooltip-effect="dark"
				    style="width: 100%"
				    @selection-change="handleSelectionChange">
				    <el-table-column
				      type="selection"
				      width="55">
				    </el-table-column>
					<el-table-column
					        prop="CustomerId"
					        label="账号"
					        width="120">
					</el-table-column>
					<el-table-column
					        prop="Consignee"
					        label="昵称"
					        width="120">
					</el-table-column>
					
					<el-table-column
					        prop="name"
					        label="真实姓名"
					        width="120">
					</el-table-column>
					<el-table-column
					        prop="address"
					        label="所属门店"
					        width="120">
					</el-table-column>
					<el-table-column
					        prop="role"
					        label="角色"
					        width="120">
					</el-table-column>
					<el-table-column  label="订单状态">
						<template slot-scope="scope">
								  
						<span v-if="scope.row.status==false" style="color: #333333;padding:2px 5px;height: 20px;  background-color: gainsboro;">无效</span>
						<span v-else-if="scope.row.status==true" style="color: #07C160;padding:2px 5px;height: 20px; background-color: rgb(240,249,235);">有效</span>
						 </template>
					</el-table-column>
					<el-table-column
					        prop="Phone"
					        label="手机号"
					        width="120">
					</el-table-column>
					<el-table-column
					        prop="Deliverytime"
					        label="最后登录时间"
					        >
					</el-table-column>
					
				</el-table>
				<el-pagination
				   @size-change="handleSizeChange"
				   @current-change="handleCurrentChange"
				   :current-page="pagination.currentPage"
				   :page-sizes="pagesizes"
				   :page-size="pagination.pageSize"
				   layout="total, sizes, prev, pager, next, jumper"
				   :total="pagination.total"
								class="pagination">
				 </el-pagination>
				
				<el-dialog
				
				  :title="dialogTitle"
				  :visible.sync="dialogVisible"
				  width="30%"
				  :before-close="handleClose">
				   <el-form   label-width="80px" :model="tempRow">
				     <el-form-item label="账号">
				       <el-input v-model="tempRow.CustomerId"></el-input>
				     </el-form-item>
					 <el-form-item label="昵称">
					   <el-input v-model="tempRow.Consignee"></el-input>
					 </el-form-item>
				     <el-form-item label="真实姓名">
				       <el-input v-model="tempRow.name"></el-input>
				     </el-form-item>
				     <el-form-item label="所属门店">
				       <el-input v-model="tempRow.address"></el-input>
				     </el-form-item>
				     <el-form-item label="角色">
				       <el-input v-model="tempRow.role"></el-input>
				     </el-form-item>
				     <el-form-item label="订单状态">
				       <input type="radio" name="type" value="有效"  v-model="tempRow.status=flag" checked="flag">有效</input>
				       <input type="radio" name="type" value="无效" v-model="tempRow.status=flag" checked="!flag">无效</input>
				     </el-form-item>
					 <el-form-item label="手机号">
					   <el-input v-model="tempRow.Phone"></el-input>
					 </el-form-item>
				   </el-form>
				  <span slot="footer" class="dialog-footer">
				    
					<!-- 根据dialogTitle 动态决定显示那个男 -->
				    <!-- <el-button type="primary" @click="sureEdit()"  v-if="dialogTitle=='编辑'">确 定</el-button> -->
					<el-button type="primary" @click="addTable()" v-if="dialogTitle=='新增用户'" icon="el-icon-check">提交</el-button>
					 
				  </span>
				  
				</el-dialog>
	</div>
</template>

<script>
	import { Dialog } from 'vant';
	export default {
		components:{
				[Dialog.name]:Dialog,
			},
			data(){
				return {
					flag:true,
					tableChecked:[],//被选中的记录数据-----对应“批量删除”传的参数值
					orderList:[],
					search:{CustomerId:"",Consignee:"", name:"",role:"",status:"", Phone:"",Deliverytime:"",},
					startTime: '',
					endTime:'' ,
					activeIndex: '1',
					pagination:"",
					// 是否显示编辑对话框
					dialogVisible:false,
					// 正在编辑中的行
					tempRow:{},
					// 正在编辑的是第几行
					tempindex:null,
					dialogTitle:"",
				}
			},
			created(){
				this.getList();
			},
			computed:{
				pagesizes:function(){
					var pages = Math.ceil(this.pagination.total/this.pagination.pageSize);
					 
					var temp = [];
					for(var i=1;i<=pages;i++){
						temp.push(i*this.pagination.pageSize);
					}
					console.log(temp,"temp")
					return temp;
				},
				ftableData:function(){
					// var that=this;
					var temp=this.orderList.filter(row=>{
						var flag=true;
						
						for (var k in this.search){
							//搜索条件遍历
							console.log(row[k])
							if(this.search[k]!=""&&!String(row[k]).includes(this.search[k])){
								flag =false;
							}
						}
						return flag;
					})
					return temp;
				}
			},
			methods:{
				
				getList(){
					// 根据参数不一样去回来的数据不一样
					this.$http.get("/web/orders/?page=1&OrderStatus=all&")
					.then(res=>{
						console.log(res.data)
						this.orderList = res.data.list;
						this.pagination = res.data.pagination;
					})
					.catch(err=>{console.log(err)})
				},
				handleSelectionChange(val) {
					console.log("handleSelectionChange--",val)
					this.tableChecked = val
					
				},
				batchDelete(rows){
					console.log(rows,"==========")
					Dialog.confirm({
					  title: '删除',
					  message: `确定要删除${this.tableChecked.length}个吗`,
					})
					  .then(() => {
					  if(this.tableChecked.length===rows.length){
						this.orderList.splice(0, this.tableChecked.length);
						this.tableChecked.splice(0, this.tableChecked.length);
					  }
					  })
					  .catch(() => {
					   
					  });
					
				},
				clearBtn(){
					this.search =
					{
						CustomerId:"",
						Consignee:"", 
						name:"",role:"",
						status:"", 
						Phone:"",
						Deliverytime:""
					}
				},
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
				},
				handleCurrentChange(val) {
					console.log(`当前页: ${val}`);
				},
				handleSelect(key, keyPath) {
			        console.log(key, keyPath);
				},
				handleClose(){
					this.dialogVisible = false;
				},
				// 添加数据到表格
				addTable(){
					// 把数据插入到前面
					this.orderList.unshift({...this.tempRow});
					// 清空编辑的行
					this.tempRow = {Consignee:"",Deliverytime:"",};
					// 关闭对话框
					this.dialogVisible = false;
				},
				// 编辑完成
				sureEdit(){
					this.dialogVisible = false;
					this.$set(this.tableData,this.tempindex,{...this.tempRow});
					this.tempRow = {};
				},
				// 单击编辑
				handleEdit(index, row){
					this.dialogVisible = true;
					this.tempRow = {...row}
					// 正在编辑的是哪一个行
					this.dialogTitle = "编辑"
					this.tempindex = this.tableData.findIndex(item=>item==row)
				},
				
			}
		
	}
</script>

<style>
	h1{
		color: #545454;
		width: 100px;
		height: 30px;
		line-height: 30px;
		border-radius: 10px;
		text-align: center;
		background-color: #e3e3e3;
		
	}
</style>
